前一章我們新增 /pages/product.vue
編輯即可在 http://localhost:3000/product 預覽頁面。

pages/
--| product.vue
--| index.vue

Nuxt.js 按 /pages/**/*.vue 的檔案結構，幫開發者自動產生路由

相較於其他 Vue.js SSR 方案，Nuxt 貼心地省了工

像是上一章的編譯結果

/* /.nuxt/router.js */
export function createRouter () {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,
    routes: [
		{
			path: "/product",
			component: _9c5e885e,
			name: "product"
		},
		{
			path: "/",
			component: _476bd8b4,
			name: "index"
		}
    ],
    
    
    fallback: false
  })
}

不再需要像寫 Vue.js SPA 時，需要自己一一定義 Routing

你也可以比較其他自幹做法，論其好壞

對應規則

網站結構會隨著功能、頁面增加變得複雜、變深，有時候得自帶參數

帶參數的動態路由

加 _ 前綴代表動態路由(帶params的路徑)

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

生成以下路徑

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

自定義 Routing

你會想，有些重複頁面，我不就得按照對應規則，存成不同檔名。

Nuxt 有兩種擴充 Routing 定義的作法

1. 全域設定檔內定義 Routing 規則

  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/custom',
        component: resolve(__dirname, 'pages/product.vue')
      })
    }
  }

2. 透過Nuxt Router Module 模組擴充
   用法與差異先賣個關子，Nuxt 進階設定 推薦模組中會提到。